<template>
    <div class="newAddress-wrapper">
        <IHeader class="header" back="true" title="收货地址" save="true" @doSave="handleSave"></IHeader>
        <scroller class="itemList" show-scrollbar="false">
            <div class="itemCell flex_row border-bottom-cecece">
                <text class="itemName" :class="[dataForm.name.error ? 'col_ff0f37' : '']">收货人</text>
                <div class="align_center flex_row">
                    <input v-model="dataForm.name.value" class="write" type="text" placeholder="请输入收货人姓名">
                    <image class="arrow_right" :src="imgPath('lianxiren.png')"></image>
                </div>
            </div>
            <div class="itemCell flex_row border-bottom-cecece">
                <text class="itemName" :class="[dataForm.phone.error ? 'col_ff0f37' : '']">联系方式</text>
                <div class="align_center flex_row">
                    <input v-model="dataForm.phone.value" class="write" type="tel" placeholder="请输入联系方式">
                    <image class="arrow_right" :src="imgPath('lianxidianhua.png')"></image>
                </div>
            </div>
            <div class="itemCell flex_row border-bottom-cecece" @click="handleSelectArea">
                <text class="itemName" :class="[dataForm.address.error ? 'col_ff0f37' : '']">所在地区</text>
                <div class="align_center flex_row">
                    <text class="area itemName" :class="[dataForm.address.value === '请选择' ? 'col_cecece' : 'col_464646']">{{dataForm.address.value}}</text>
                    <image class="arrow_right" :src="imgPath('arrow_right_small.png')"></image>
                </div>
            </div>
            <div class="itemCell flex_row border-bottom-cecece">
                <text class="itemName" :class="[dataForm.detailAddress.error ? 'col_ff0f37' : '']">详细地区</text>
                <div class="align_center flex_row">
                    <input v-model="dataForm.detailAddress.value" class="write" type="text" placeholder="请输入详细的地址信息">
                </div>
            </div>
            <div class="setDefault flex_row" @click="selectDefault">
                <Check class="margin_right_16" show="true" :checked="checked" @doclick="selectDefault"></Check>
                <!--<image class="check" :src="imgPath('checked.png')"></image>-->
                <text class="setWord col_464646">设置默认地址</text>
            </div>
            <div class="delete-wrapper flex_row" v-if="addressId > 0">
                <text class="delete" @click="deleteMyAddress">删除地址</text>
            </div>
        </scroller>
        <!--地址选择-->
        <Address :show="addressShow" @cancel="handleAddressCancel" @confirm="handleAddressConfirm"></Address>
        <!--错误弹窗-->
        <Modal :show="modalShow" :word="modalWord" type="0"></Modal>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Check from '@/components/check'
import Address from '@/components/address'
import Modal from '@/components/modal'
import { WxcLoading } from 'weex-ui'
import { validatenull } from '@/util/validate'
import { addAddress, updateAddress, searchAddress, deleteAddress } from '@/api/order'
const modal = weex.requireModule('modal')

export default {
  name: 'newAddress',
  data () {
    return {
      addressId: 0, // 地址id
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      modalShow: false, // 错误弹窗显示
      modalWord: '', // 错误提示语
      checked: false, // 是否默认地址
      addressShow: false, // 地区选择显示
      dataForm: {
        name: {
          value: '',
          name: '收货人',
          error: false
        },
        phone: {
          value: '',
          name: '联系方式',
          error: false
        },
        address: {
          value: '请选择',
          name: '所在地区',
          error: false
        },
        detailAddress: {
          value: '',
          name: '详细地址',
          error: false
        }
      },
      addressObj: [] // 地址对象
    }
  },
  mounted () {
    const that = this
    this.addressId = this.$route.query.id ? this.$route.query.id : 0 // 传参地址
    if (that.addressId > 0) {
      that.loadingShow = true
      that.$api.get(searchAddress + '/' + that.addressId, {}, (res) => {
        let dataObj = res.data
        that.dataForm.name.value = dataObj.consignee
        that.dataForm.phone.value = dataObj.phone
        that.dataForm.detailAddress.value = dataObj.address
        that.dataForm.address.value = dataObj.provinceName + ' ' + dataObj.cityName + ' ' + dataObj.districtName
        that.addressObj = [
          {
            id: dataObj.provinceId,
            value: dataObj.provinceName
          },
          {
            id: dataObj.cityId,
            value: dataObj.cityName
          },
          {
            id: dataObj.districtId,
            value: dataObj.districtName
          }
        ]
        if (dataObj.openDefaultAddress === '1') {
          that.checked = true
        } else {
          that.checked = false
        }
        that.loadingShow = false
      }, () => {
        that.loadingShow = false
      })
    }
  },
  methods: {
    selectDefault () { // 是否默认
      this.checked = !this.checked
    },
    handleSave () { // 保存
      const that = this
      for (let i in that.dataForm) {
        if (validatenull(that.dataForm[i].value) || that.dataForm[i].value === '请选择') {
          modal.toast({
            message: i
          })
          that.modalShow = true
          that.modalWord = that.dataForm[i].name + '信息有误'
          that.dataForm[i].error = true
          setTimeout(() => {
            that.modalShow = false
          }, 1000)
          return
        }
        that.dataForm[i].error = false
      }
      let params = {
        consignee: that.dataForm.name.value,
        phone: that.dataForm.phone.value,
        address: that.dataForm.detailAddress.value,
        provinceId: that.addressObj[0].id,
        provinceName: that.addressObj[0].value,
        cityId: that.addressObj[1].id,
        cityName: that.addressObj[1].value,
        districtId: that.addressObj[2].id,
        districtName: that.addressObj[2].value
      }
      let url = ''
      if (that.addressId > 0) {
        url = updateAddress
        params.id = that.addressId
      } else {
        url = addAddress
      }
      params.openDefaultAddress = that.checked ? '1' : '0'
      that.$api.post(url, params, () => {
        modal.toast({
          message: '保存成功',
          duration: 0.8
        })
        that.$router.push('/account/myAddress')
      }, () => {}, true)
    },
    handleSelectArea () { // 地区选择
      this.addressShow = true
    },
    handleAddressCancel () { // 取消
      this.addressShow = false
    },
    handleAddressConfirm (obj) { // 确认
      const that = this
      let ids = obj.val.split(' ')
      let values = obj.str.split(' ')
      that.addressObj = []
      ids.forEach((item, index) => {
        let data = {
          id: ids[index],
          value: values[index]
        }
        that.addressObj.push(data)
      })
      that.dataForm.address.value = obj.str
      that.addressShow = false
    },
    deleteMyAddress () {
      const that = this
      modal.confirm({
        message: '确定删除该地址？',
        okTitle: '确定',
        cancelTitle: '取消'
      }, function (value) {
        if (value === '确定') {
          that.$api.post(deleteAddress + '/' + that.addressId, {}, () => {
            modal.toast({
              message: '删除成功',
              duration: 0.8
            })
            that.$router.push('/account/myAddress')
          })
        }
      })
    }
  },
  components: {
    IHeader,
    Check,
    WxcLoading,
    Modal,
    Address
  }
}
</script>

<style scoped>
    .flex_row {
        flex-direction: row;
    }
    .align_center {
        align-items: center;
    }
    .col_464646 {
        color: #464646;
    }
    .col_cecece {
        color: #cecece;
    }
    .col_ff0f37 {
        color: #ff0f37;
    }
    .border-bottom-cecece {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #cecece;
    }
    .newAddress-wrapper {
        background-color: #f5f5f5;
    }
    .itemList {
        margin-top: 88px;
        background-color: #fff;
    }
    .itemCell {
        height: 88px;
        padding-left: 24px;
        padding-right: 24px;
        /*padding-bottom: 1px;*/
        align-items: center;
        justify-content: space-between;
    }
    .itemName {
        color: #868686;
        font-size: 28px;
    }
    .arrow_right {
        width: 40px;
        height: 40px;
        margin-left: 24px;
    }
    .write {
        width: 440px;
        height: 88px;
        border-width: 0;
        font-size: 28px;
        color: #464646;
        text-align: right;
        placeholder-color: #cecece;
    }
    .setDefault {
        height: 88px;
        padding-left: 24px;
        padding-right: 24px;
        align-items: center;
    }
    .margin_right_16 {
        margin-right: 16px;
    }
    .setWord {
        font-size: 28px;
        font-weight: bold;
    }
    .delete-wrapper {
        margin-top: 100px;
        justify-content: center;
    }
    .delete {
        width: 564px;
        height: 70px;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
        line-height: 70px;
        font-size: 26px;
        text-align: center;
        border-radius: 10px;
    }
</style>
